<script setup lang="ts">
const props = defineProps<{
  list: {
    lable: string
    value: string | number
  }[]
  val?: string | number
}>()

const emits = defineEmits<{
  (e: 'update:val', val: string | number): void
}>()
const toChange = (val: string | number) => {
  emits('update:val', val)
}
</script>

<template>
  <div class="article-page">
    <button
      v-for="(item, i) in props.list"
      :key="i"
      :class="{ active: item.value == val }"
      @click="toChange(item.value)"
    >
      {{ item.lable }}xxxxx
    </button>
  </div>
</template>

<style lang="scss" scoped>
.active {
  background-color: red;
}
</style>
